import React, { Component } from 'react';
import { View, Text, Animated, Dimensions, PanResponder, Image } from 'react-native';

const { width } = Dimensions.get('window');

class SwiperView extends Component {
	constructor(props) {
		super(props);
		this.state = {
			sports: new Animated.Value(-width), // 设置初始值
		};
		this.startTimestamp = 0; // 拖拽开始时间戳（用于计算滑动速度）
		this.endTimestamp = 0; // 拖拽结束时间戳用于计算滑动速度）
		this.page = 1; // 首次展示第一条数据（page 最小值为0，即从0开始，1为第二个条目）
	}
	componentWillMount() {
		this.panResponder();
	}

	panResponder() {
		this._panResponder = PanResponder.create({
			onMoveShouldSetPanResponder: (evt, gestureState) => true,
			onPanResponderTerminationRequest: (evt, gestureState) => true,
			onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
			onPanResponderGrant: (evt, gestureState) => {
				// 滑动开始，记录时间戳
				this.startTimestamp = evt.nativeEvent.timestamp;
			},
			onPanResponderMove: (evt, gestureState) => {
				// 滑动横向距离
				let x = gestureState.dx;
				// 实时改变滑动位置
				if (x > 0) {
					this.setState({
						sports: new Animated.Value(-this.page * width + x),
					});
				} else {
					this.setState({
						sports: new Animated.Value(x - this.page * width),
					});
				}
			},
			onPanResponderRelease: (evt, gestureState) => {
				// 滑动结束时间戳
				this.endTimestamp = evt.nativeEvent.timestamp;
				// 滑动距离，根据滑动距离与时间戳计算是否切换到下一个条目
				let x = gestureState.dx;
				if (x > 0) {
					// 滑动距离大于屏幕1半，开启动画，滑动到下一个界面，或者滑动速度很快，并且滑动距离大于20，也滑动到下一个条目
					if (x > width / 2 || (this.endTimestamp - this.startTimestamp < 300 && x > 20)) {
						this.page -= 1;
					}
					console.log(-this.page * width);
					Animated.timing(this.state.sports, {
						toValue: -this.page * width,
						duration: 200,
					}).start((state) => {
						// 动画完成，判断是否需要重置位置
						if (state.finished) {
							if (this.page <= 0) {
								this.page = 4;
								console.log(-this.page * width);
								this.setState({
									sports: new Animated.Value(-4 * width),
								});
							}
						}
					});
				} else {
					x = Math.abs(x);
					// 滑动距离大于屏幕1半，开启动画，滑动到下一个界面，或者滑动速度很快，并且滑动距离大于20，也滑动到下一个条目
					if (x > width / 2 || this.endTimestamp - this.startTimestamp < 300) {
						this.page += 1;
					}
					Animated.timing(this.state.sports, {
						toValue: -this.page * width,
						duration: 200,
					}).start((state) => {
						// 动画完成，判断是否需要重置位置
						if (state.finished) {
							if (this.page >= 5) {
								this.page = 1;
								this.setState({
									sports: new Animated.Value(-width * this.page),
								});
							}
						}
					});
				}
			},
			onShouldBlockNativeResponder: (evt, gestureState) => {
				return false;
			},
		});
	}
	render() {
		return (
			<Animated.View
				style={{ ...this.props.style, left: this.state.sports }}
				{...this._panResponder.panHandlers}
			>
				{this.props.children}
			</Animated.View>
		);
	}
}

export default class App extends Component {
	render() {
		return (
			<View style={[{ width: width, height: 160 }]}>
				<SwiperView style={{ width: width * 5, height: '100%', flexDirection: 'row' }}>
					<View>
						<Image
							source={{
								uri:
									'http://60.191.15.90:3002/MESHOP01/M00/0B/A0/ywPsoV_4KnqAEC9dAAF6UfZexB8743.png',
							}}
							style={[{ width, height: '100%', backgroundColor: '#FFF' }]}
						/>
						<Text>4</Text>
					</View>
					<View>
						<Image
							source={{
								uri:
									'http://60.191.15.90:3002/MESHOP01/M00/0A/B8/ywPsn1_bAtOARqAUAACwuamTdaU497.jpg',
							}}
							style={[{ width, height: '100%', backgroundColor: '#FFF' }]}
						/>
						<Text>1</Text>
					</View>
					<View>
						<Image
							source={{
								uri:
									'http://60.191.15.90:3002/MESHOP01/M00/08/9D/ywPsoF9izQWAIxmYAAKV3ad0SUc498.png',
							}}
							style={[{ width, height: '100%', backgroundColor: 'red' }]}
						/>
						<Text>2</Text>
					</View>
					<View>
						<Image
							source={{
								uri:
									'http://60.191.15.90:3002/MESHOP01/M00/08/9E/ywPsoV9izReAfLZnAAJZB3CcX_g050.png',
							}}
							style={[{ width, height: '100%', backgroundColor: 'green' }]}
						/>
						<Text>3</Text>
					</View>
					<View>
						<Image
							source={{
								uri:
									'http://60.191.15.90:3002/MESHOP01/M00/0B/A0/ywPsoV_4KnqAEC9dAAF6UfZexB8743.png',
							}}
							style={[{ width, height: '100%', backgroundColor: '#FFF' }]}
						/>
						<Text>4</Text>
					</View>
					<View>
						<Image
							source={{
								uri:
									'http://60.191.15.90:3002/MESHOP01/M00/0A/B8/ywPsn1_bAtOARqAUAACwuamTdaU497.jpg',
							}}
							style={[{ width, height: '100%', backgroundColor: '#FFF' }]}
						/>
						<Text>1</Text>
					</View>
				</SwiperView>
			</View>
		);
	}
}
